<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <!-- 头部 -->
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
        background: isHeadBack ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0)',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#EEEEEE"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">积分转让</view>
    </view>
    <!-- 主体 -->
    <view class="top">
      <view class="top_num">{{ userInfo.integral }}</view>
      <view class="top_text">我的积分</view>
    </view>

    <view class="box">
      <u-input
        class="inputPassword"
        type="number"
        placeholder="请输入转让人的账号"
        border="none"
        shape="circle"
        color="#888888"
        :fontSize="inputFont"
        v-model="phone"
        @change="change"
        placeholderStyle="color:#888888"
      ></u-input>
      <view class="verify" v-show="false">转让人账号不存在，请重试！</view>

      <u-input
        class="inputPassword"
        type="number"
        placeholder="请输入积分"
        border="none"
        shape="circle"
        color="#888888"
        :fontSize="inputFont"
        v-model="number"
        @change="change1"
        placeholderStyle="color:#888888"
      ></u-input>
      <view class="verify" v-show="false">账号积分余额不足</view>
      <view class="login" @click="transference">
        <view class="loginFont">确认转让</view>
      </view>
    </view>

    <u-modal
      :show="show"
      :title="title"
      :content="content"
      confirmColor="#55B877"
      :closeOnClickOverlay="true"
      @confirm="confirm"
      @close="close"
      @cancel="cancel"
      :showCancelButton="true"
    ></u-modal>

    <floatingBall></floatingBall>
  </view>
</template>
          
<script>
export default {
  components: {},

  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      isHeadBack: false,
      inputFont: "30rpx",
      phone: "",
      number: "",
      show: false,
      title: "确认借出",
      content: "是否确认借出积分？",
      userInfo: {},
    };
  },

  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
    this.getPointLog();
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    change() {
      console.log(this.phone);
    },
    change1() {
      console.log(this.number);
    },
    confirm() {
      this.pointZhuan()
    },
    close() {
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
    // 我的积分
    getPointLog() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let time = year + "-" + month;
      this.$http
        .userPointLog({ time: time, type: -1 })
        .then((res) => {
          console.log(res.data, "我的积分");
          this.userInfo = res.data.userInfo;
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 积分记转让
    pointZhuan() {
      this.$http
        .userPointZhuanrang({ phone:this.phone,number:this.number })
        .then((res) => {
          console.log(res, "积分记转让");
          this.show = false;
          this.getPointLog()
          uni.$u.toast(res.message);
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    transference(){
      if(this.phone == ''){
        return ni.$u.toast('请输入账号');
      }
      if(this.number == ''){
        return ni.$u.toast('请输入积分');
      }
      this.show = true
    }
  },
};
</script>
          
          <style scoped lang="scss">
.content {
  // background: #F7F8FA;
  box-sizing: border-box;
  // background: url("/static/images/my/pic_wdjf_bwijing.png") no-repeat;
  // background-size: 100% auto;
  // background-attachment: fixed;

  z-index: -10;
  display: flex;
  flex-direction: column;
}
.scroll_view {
  height: 100%;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #ffffff;
  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #ffffff;
    font-size: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #eeeeee;
  }
}
.top {
  background: linear-gradient(312deg, #ffbb7b 0%, #ff9523 100%);
  width: 100%;
  height: 490rpx;
  position: fixed;
  top: 0;
  left: 0;
  .top_num {
    font-size: 80rpx;
    color: #ffffff;
    text-align: center;
    margin-top: 178rpx;
  }
  .top_text {
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
    margin-top: 24rpx;
  }
}
.box {
  position: fixed;
  top: 370rpx;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #111111;
  border-radius: 32rpx 32rpx 0rpx 0rpx;
  margin-top: 52rpx;
  z-index: 10;
  padding: 72rpx 60rpx;
  //   overflow: hidden;
  /deep/.inputPassword {
    width: 630rpx;
    height: 96rpx;
    background-color: #272c29;
    margin-top: 40rpx;
    position: relative;

    .u-input__content {
      padding: 0 50rpx;
    }
    .codeTip {
      position: absolute;
      right: 50rpx;
      bottom: 30rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #55b877;
    }
  }
  .verify {
    margin: 16rpx 0 0 30rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    color: #ee6060;
  }
  .login {
    width: 630rpx;
    height: 96rpx;
    margin-top: 54rpx;
    background: #ff8a4c;
    border-radius: 48rpx 48rpx 48rpx 48rpx;

    .loginFont {
      line-height: 96rpx;
      text-align: center;
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }
}

/deep/ .u-modal__content__text {
  text-align: center;
}
</style>